@import 'variables.scss';

$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'info': $info,
  'warning': $warning,
  'danger': $danger,
  'light': $light,
  'dark': $dark,
  'tertiary': $tertiary,
  'white': $white
);

@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/react-datepicker/dist/react-datepicker';

// old styles
@import 'css/datas/after-offset';
@import 'css/datas/filter';
@import 'css/datas/highlight';
@import 'css/forms/ace';
@import 'css/forms/multiple';
@import 'css/forms/datetime';
@import 'css/forms/select';
@import 'css/tables/row-action';
@import 'css/tables/table';
@import 'css/templates/bootstrap';
@import 'css/templates/layout';
@import 'css/templates/login';

// components
@import 'components/Base/Base';
@import 'components/DatePicker/styles';
@import 'components/Form/Select/styles';
@import 'components/Form/styles';
@import 'components/Modal/styles';
@import 'components/PageSize/styles';
@import 'components/Pagination/styles';
@import 'components/SearchBar/styles';
@import 'components/Spinner/Spinner';
@import 'components/Table/styles';

// containers
@import 'containers/Connect/ConnectCreate/styles';
@import 'containers/Connect/ConnectDetail/ConnectConfigs/styles';
@import 'containers/Connect/ConnectDetail/ConnectTasks/styles';
@import 'containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupMembers/styles';
@import 'containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate/styles';
@import 'containers/KsqlDB/KsqlDBQuery/styles';
@import 'containers/Loading/styles';
@import 'containers/Login/styles';
@import 'containers/Node/NodeDetail/styles';
@import 'containers/Schema/SchemaList/styles';
@import 'containers/Settings/styles';
@import 'containers/SideBar/styles';
@import 'containers/Tail/styles';
@import 'containers/Topic/Topic/styles';
@import 'containers/Topic/Topic/TopicAcls/styles';
@import 'containers/Topic/Topic/TopicConfigs/styles';
@import 'containers/Topic/Topic/TopicData/styles';
@import 'containers/Topic/Topic/TopicGroups/styles';
@import 'containers/Topic/Topic/TopicLogs/styles';
@import 'containers/Topic/Topic/TopicPartitions/styles';
@import 'containers/Topic/TopicCopy/styles';
@import 'containers/Topic/TopicList/styles';
@import 'containers/Topic/TopicProduce/styles';

.khq-data-filter {
  @include media-breakpoint-up(sm) {
    select {
      max-width: 100%;
    }
  }
}

.table-hover tbody tr:hover code:after {
  background: linear-gradient(transparent, $body-bg);
}

#content {
  transition: all 0.2s ease;

  aside {
    width: 100%;
    left: 0;
  }
}

#content aside {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: red;
  padding: 5px 15px;
  background: $black;
  border-top: 1px solid $nav-tabs-border-color;
  display: flex;
  justify-content: flex-end;
  z-index: $zindex-fixed;

  > div {
    flex: 1;

    &:first-child {
      flex-grow: 2;
    }

    &:last-child {
      text-align: right;
    }
  }

  .btn {
    white-space: nowrap;
  }
}

ul.nav-tabs {
  .nav-link {
    background-color: transparent;
    border: 0 solid;
    border-bottom-width: 4px;
    border-bottom-color: transparent;
    padding: 10px 30px;
    color: white;

    &.active,
    &:hover.active {
      font-weight: bold;
      color: $primary;
      border-bottom-color: $primary;
      border-bottom-width: 4px;
      background-color: transparent;
    }

    &:hover {
      transition-duration: 0ms;
      border-bottom-color: $gray-400;
      border-bottom-width: 4px;
    }
  }
}

.tabs-container {
  .tab-content {
    padding: 20px;
    border: 1px solid $nav-tabs-border-color;
    border-top: 0;
  }
}

footer {
  width: 100% !important;
}
footer div,
footer a {
  margin-left: 8px;
}

.react-datepicker {
  display: inline-flex !important;
}

.settings-wrapper,
.select-wrapper {
  display: flex;
}

.form-group {
  margin-bottom: 16px;
}

table {
  tbody {
    .key {
      color: $warning;
    }

    pre {
      white-space: pre-wrap;
      overflow-wrap: break-word;
      overflow: hidden;
      max-height: 100px;
      cursor: pointer;
      position: relative;

      code {
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-all;
        display: block;
        color: $gray-500;
        font-size: 12px;

        &:after {
          content: '';
          width: 100%;
          height: 35px;
          position: absolute;
          left: 0;
          bottom: 0;
          background: linear-gradient(transparent, $body-bg-dark);
        }
      }
    }
  }
}

.table-responsive {
  .action-hover {
    text-align: center;
  }
}
